<template>
    <view class="content">
        <!-- <upNavbar :title="''" :bgColor="'#fff'"></upNavbar> -->
        <div class="topBox1">
            <div class="returnBtn" @click="hendleReturnBtn">
                <up-icon name="arrow-left" bold size="20"></up-icon>
            </div>
        </div>
        <div class="topBox">
            <span class="topText">{{ $t('addpictures') }}</span>
            <up-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
                :previewImage="true" :previewFullImage="false" :maxCount="6" @clickPreview="clickPreview"></up-upload>
        </div>
        <div class="titleText">
            <span class="topText">{{ $t('addatitle') }}</span>
            <u--input v-model="titleTex" confirm-type="search" :placeholder="$t('pleaseentertitle')"
                prefixIconStyle="font-size: 22px;color: #fff" placeholder-style="color:#888888"></u--input>
        </div>
        <div class="described">
            <span class="topText">{{ $t('adddescription') }}</span>
            <up-textarea v-model="value1" :placeholder="$t('pleaseenterdescription')" placeholder-style="color:#888888"
                :maxlength="1000" :height="120"></up-textarea>
        </div>
        <div class="footle">
            <div class="preview" @click="previewBtn">
                <image src="/static/images/eye.png"></image>
                <span class="previewText">{{ $t('preview') }}</span>
            </div>
            <div class="btn">
                <u-button type="primary" @click="released" :loading="btnLoading" :loadingText="t('released')">{{
                    $t('released') }}</u-button>
            </div>
        </div>
        <!-- 授权弹窗 -->
        <up-popup :show="show3" mode="bottom" @close="close3" @open="open3">
            <view>
                <div class="popupBox3">
                    <div class="head">
                        <span class="head1">{{ $t('getpermissions') }}</span><br>
                        <span class="head2">{{ $t('Obtaining') }}</span>
                    </div>
                    <div class="pb3body">
                        <div class="bodyItem">
                            <div class="bodyItemleft">
                                <image src="/static/images/xc.png"></image>
                            </div>
                            <div class="bodyItemright">
                                <span class="bodyItemright1">{{ $t('Accessphotoalbumrights') }}</span><br>
                                <span class="bodyItemright2">{{ $t('Usedforsavingandreadingpictures') }}</span>
                            </div>
                        </div>
                        <div class="bodyItem">
                            <div class="bodyItemleft">
                                <image src="/static/images/xj.png"></image>
                            </div>
                            <div class="bodyItemright">
                                <span class="bodyItemright1">{{ $t('Accesscamerarights') }}</span><br>
                                <span class="bodyItemright2">{{ $t('Usedtouploadpicturesandcreatebabyrings') }}</span>
                            </div>
                        </div>
                        <div class="bodyBtnList">
                            <up-button size="large" @click="getAllpermissions()">{{ $t('continue') }}</up-button>
                            <span @click="show3 = false">{{ $t('useLater') }}</span>
                        </div>
                    </div>
                </div>
            </view>
        </up-popup>
        <up-toast ref="uToastRef"></up-toast>
        <upModal :modalWidth="'14.75rem'" :modalShow="modalShow" :modalText1="modalText1" :showImage="showImage"
            :isCancel="isCancel" @cancel="modalShow = false" @cloos="modalShow = false"></upModal>
    </view>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { onLoad, onBackPress } from '@dcloudio/uni-app';
import upNavbar from '../../components/upNavbar.vue'
import { uploadImg, funplay } from '@/api/newAdd/newAdd.js'
import { useI18n } from 'vue-i18n'
import { getFull } from "@/api/meApi/me.js"
import permision from "@/js_sdk/wa-permission/permission.js"
import upModal from '../../components/upModal.vue';
const uToastRef = ref(null)
const { t } = useI18n()
const fileList1 = ref([])
const titleTex = ref('')
const value1 = ref('');
const btnLoading = ref(false)
const upImgLoading = ref(false)// 是否正在上传图片
const show3 = ref(false);
const havePhone = ref<Boolean>(false)
const userData = ref({
    userName: '',
    avatarUrl: '',
    userCode: '',
})
const modalShow = ref(false)
let modalText1 = ref(t('Doyouwanttocancelattention'))
const showImage = ref(false)
const isCancel = ref(false)
const getUserData = () => {// 获取用户信息
    getFull().then((res: object) => {
        if (res.code == 200) {
            if (res.data.phone) {
                havePhone.value = true
                userData.value = {
                    userName: res.data.username,
                    avatarUrl: res.data.avatarUrl,
                    userCode: res.data.userCode,
                }
            }
        }
    })
}
function open3() {
    show3.value = true;
}
function close3() {
    show3.value = false;
}
// 获取权限
const getAllpermissions = async () => {
    close3()
    const platform = uni.getSystemInfoSync().platform
    if (platform === 'ios') {
        permision.judgeIosPermission('album')
        permision.judgeIosPermission('camera')
    } else if (platform === 'android') {
        await permision.requestAndroidPermission('android.permission.READ_EXTERNAL_STORAGE')
        await permision.requestAndroidPermission('android.permission.CAMERA')
    }
}
// 上传图片相关-头
// 删除图片
const deletePic = (event) => {
    fileList1.value.splice(event.index, 1);
};
const lists = ref([])// 需要上传的图片临时列表
// 新增图片
const afterRead = async (event) => {
    upImgLoading.value = true;
    // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
    lists.value = [].concat(event.file);
    // console.log("文件:", lists.value)
    let fileListLen = fileList1.value.length;
    lists.value.map((item) => {
        fileList1.value.push({
            ...item,
            status: 'uploading',
            message: t('uploading'),
        });
    });
    for (let i = 0; i < lists.value.length; i++) {
        // 先压缩图片
        const compressedFile = await compressImage(lists.value[i]);

        // #ifndef H5
        // 检查压缩后的大小是否超过 2MB
        if (compressedFile.size > 2 * 1024 * 1024) {
            uToastRef.value.show({
                message: t('Filesizeexceedslimit'),
                type: "error",
                icon: "none"
            });
            fileList1.value = fileList1.value.filter(item => item.name !== file.name);
            upImgLoading.value = false;
            return;
        }
        // const result = await uploadFilePromise(lists.value[i].url);
        const result = await uploadFilePromise(compressedFile.url, i);
        // #endif
        // #ifdef H5
        // const result = await uploadFilePromise(lists.value[i].file);
        const result = await uploadFilePromise(compressedFile, i);
        // #endif
        // console.log("result:", result)
        let item = fileList1.value[fileListLen];
        // console.log("fileList1:", fileList1.value)
        fileList1.value.splice(fileListLen, 1, {
            ...item,
            status: 'success',
            message: '',
            url: result,
        });
        fileListLen++;
    }
    upImgLoading.value = false;
};
// 压缩图片函数
const compressImage = async (file) => {
    return new Promise((resolve, reject) => {
        // #ifdef H5
        // 使用compressorjs库进行压缩（需要先安装）
        if (typeof Compressor !== 'undefined') {
            new Compressor(file.file, {
                quality: 0.6,
                maxWidth: 1920,
                maxHeight: 1080,
                success(result) {
                    resolve(result);
                },
                error(err) {
                    console.error('压缩失败:', err);
                    resolve(file.file); // 压缩失败则使用原文件
                }
            });
        } else {
            // 如果没有compressorjs，直接使用原文件
            console.warn('compressorjs未加载，跳过压缩');
            resolve(file.file);
        }
        // #endif

        // #ifndef H5
        uni.compressImage({
            src: file.url,
            quality: 90, // 压缩质量，范围0～100
            success: (res) => {
                // console.log('压缩成功:', res)
                // resolve({
                //     ...file,
                //     url: res.tempFilePath,
                //     path: res.tempFilePath,
                // });
                // 在 App 端，需要通过 uni.getFileInfo 获取压缩后的文件大小
                uni.getFileInfo({
                    filePath: res.tempFilePath,
                    success: (info) => {
                        resolve({
                            ...file,
                            url: res.tempFilePath,
                            path: res.tempFilePath,
                            size: info.size, // 记录压缩后的大小
                        });
                    },
                    fail: (error) => {
                        console.error('获取压缩文件信息失败:', error);
                        resolve({ ...file, size: file.size || 0 }); // 获取失败，使用原文件大小
                    }
                });
            },
            fail: (error) => {
                console.log('压缩失败:', error);
                resolve(file); // 压缩失败则使用原文件
            }
        });
        // #endif
    });
};
const uploadFilePromise = (files: any, indexNum: number) => {
    console.log("files:", files)
    // 创建 FormData 对象并添加文件
    // #ifdef H5
    const formData = new FormData();
    formData.append('file', files)
    // #endif

    // files.forEach((file, index) => { // 上传多个的方法
    //     formData.append('file', file.file); // 'file' 是后端接收多文件的字段名
    //     // 如果后端需要区分文件顺序或其他信息，可以这样：
    //     // formData.append(`files[${index}]`, file);
    // });
    return new Promise((resolve, reject) => {
        // 检查文件大小
        const isOverSize = checkFileSize(files);
        if (isOverSize) {
            uToastRef.value.show({
                message: t('Filesizeexceedslimit'),
                duration: 2000,
                type: "default",
                icon: "none",
            })
            fileList1.value = fileList1.value.filter((item: any) => item.name !== files.name)
            upImgLoading.value = false;
            return reject(new Error(t('Filesizeexceedslimit')));
        }
        // #ifdef H5
        fetch(uni.$baseUrl + '/dpl/v2/funplay/uploadImag', { // 修改为你的实际地址
            method: 'POST',
            body: formData,
            headers: {
                // 'Content-Type': 'application/json;charset=UTF-8',
                'Authorization': uni.getStorageSync('token')
            },
            // 如果需要携带 cookie，请取消注释下一行
            // credentials: 'include'
        }).then(response => response.json())
            .then(res => {
                // console.log('fileList1.value', fileList1.value);
                // console.log('lists.value', lists.value);
                // console.log('res', res);
                if (res.code == 200) {
                    setTimeout(() => {
                        resolve(res.data);
                    }, 1000);
                    upImgLoading.value = false;
                } else if (res.code == 993) {
                    modalText1.value = res.msg
                    showImage.value = true
                    isCancel.value = false
                    modalShow.value = true
                    if (fileList1.value.length > 0) {
                        fileList1.value = fileList1.value.slice(0, -lists.value.length); // 创建一个不包含最后n个元素的新数组
                    }
                    upImgLoading.value = false;
                } else if (res.code == 13121206) {// 上传图片违规
                    modalText1.value = t('Picturesviolations')
                    showImage.value = true
                    isCancel.value = false
                    modalShow.value = true
                    if (fileList1.value.length > 0) {
                        // fileList1.value = fileList1.value.filter((_, index) => index !== indexNum)
                        fileList1.value.splice(indexNum, lists.value.length);
                    }
                    // fileList1.value = fileList1.value.filter((_, index) => index !== indexNum)
                    upImgLoading.value = false;
                } else {
                    uToastRef.value.show({
                        // message: t('Uploadtryagain'),
                        message: `${res.msg}`,
                        duration: 3000,
                        type: "default",
                        icon: "none",
                    })
                    if (fileList1.value.length > 0) {
                        fileList1.value = fileList1.value.slice(0, -lists.value.length); // 创建一个不包含最后n个元素的新数组
                    }
                    upImgLoading.value = false;
                }
            }).catch((error) => {
                if (fileList1.value.length > 0) {
                    fileList1.value = fileList1.value.slice(0, -lists.value.length); // 创建一个不包含最后n个元素的新数组
                }
                uToastRef.value.show({
                    message: t('Uploadtryagain'),
                    duration: 2000,
                    type: "default",
                    icon: "none",
                })
                upImgLoading.value = false;
            })
        // #endif

        // #ifndef H5
        uni.uploadFile({
            url: uni.$baseUrl + '/dpl/v2/funplay/uploadImag',
            filePath: files, // 单文件路径
            name: 'file', // 后端接收的字段名
            header: {
                'Authorization': uni.getStorageSync('token')
            },
            success: (res: any) => {
                // try {
                //     JSON.parse(res.data)
                // } catch (error) {
                //     modalText1.value = JSON.parse(res.data).msg
                //     showImage.value = true
                //     isCancel.value = false
                //     modalShow.value = true
                //     if (fileList1.value.length > 0) {
                //         fileList1.value = fileList1.value.slice(0, -lists.value.length); // 创建一个不包含最后n个元素的新数组
                //     }
                //     upImgLoading.value = false;
                //     reject(new Error(data.message || t('Uploadtryagain')));
                //     return
                // }
                const data = JSON.parse(res.data);
                // console.log("🚀data:", data)
                if (data.code == 200) {
                    resolve(data.data);
                    upImgLoading.value = false;
                } else if (data.code == 13121206) {// 上传图片违规
                    modalText1.value = data.msg
                    showImage.value = true
                    isCancel.value = false
                    modalShow.value = true

                    if (fileList1.value.length > 0) {
                        // fileList1.value = fileList1.value.filter((_, index) => index !== indexNum)
                        fileList1.value.splice(indexNum, lists.value.length);
                    }
                    upImgLoading.value = false;
                } else {
                    uToastRef.value.show({
                        // message: t('Uploadtryagain'),
                        message: `${data.msg}`,
                        duration: 3000,
                        type: "default",
                        icon: "none",
                    })
                    if (fileList1.value.length > 0) {
                        fileList1.value = fileList1.value.slice(0, -lists.value.length); // 创建一个不包含最后n个元素的新数组
                    }
                    upImgLoading.value = false;
                    reject(new Error(data.message || t('Uploadtryagain')));
                }
            },
            fail: (error: any) => {
                console.log("🚀 ~ 上传图片 ~ error:", error)
                uToastRef.value.show({
                    message: t('Uploadtryagain'),
                    duration: 2000,
                    type: "default",
                    icon: "none",
                })
                if (fileList1.value.length > 0) {
                    fileList1.value = fileList1.value.slice(0, -lists.value.length); // 创建一个不包含最后n个元素的新数组
                }
                upImgLoading.value = false;
                reject(error);
            }
        });
        // #endif
    });
};
// 检查文件大小
const checkFileSize = (file) => {
    // #ifdef H5
    if (file instanceof File) {
        return file.size > 2 * 1024 * 1024;
    }
    // #endif

    // #ifndef H5
    // 这里需要获取文件大小，可能需要额外处理
    // 由于uni.chooseImage返回的文件对象可能不包含size属性
    // 可以在afterRead时记录原始文件大小
    return false; // 非H5端暂时不检查
    // #endif
};
// 预览图片
const clickPreview = (url: any, lists, name) => {
    console.log('fileList1', fileList1.value);
    // 提取所有图片URL
    const urls = fileList1.value.map((item: any) => item.url[0].signUrl)
    // 调用uniapp的图片预览接口
    uni.previewImage({
        current: url.index, // 当前点击的图片索引
        urls: urls,     // 所有图片URL数组
        indicator: 'number' // 可选：显示图片索引指示器
    })
}
// 上传图片相关-尾
// 发布
const released = () => {
    // if (!havePhone.value) {// 判断是否绑定了手机号
    //     uni.navigateTo({
    //         url: '/pages/newAdd/bindnumber'
    //     })
    //     return
    // }
    if (upImgLoading.value) {
        uToastRef.value.show({
            message: t('Uploadingpleasewait'),
            duration: 2000,
            type: "default",
            icon: "none",
        })
        return false
    }
    // 如果输入空格内容只有空格，将内容去掉
    if (titleTex.value && titleTex.value.replace(/\s+/g, '') === "") {
        titleTex.value = ''
    } else if (value1.value && value1.value.replace(/\s+/g, '') === "") {
        value1.value = ''
    }
    if (!titleTex.value) {
        uToastRef.value.show({
            message: t('pleaseentertitle'),
            duration: 2000,
            type: "default",
            icon: "none",
        })
        return false
    } else if (!value1.value) {
        uToastRef.value.show({
            message: t('pleaseenterdescription'),
            duration: 2000,
            type: "default",
            icon: "none",
        })
        return false
    }
    if (titleTex.value.length > 30 || titleTex.value.length < 5) {
        uToastRef.value.show({
            message: t('titlecharacters'),
            duration: 2000,
            type: "default",
            icon: "none",
        })
        return false
    }
    if (value1.value.length > 1000 || value1.value.length < 5) {
        uToastRef.value.show({
            message: t('Content1000'),
            duration: 2000,
            type: "default",
            icon: "none",
        })
        return false
    }
    if (fileList1.value.length <= 0) {
        uToastRef.value.show({
            message: t('Pleaseuploadpictures'),
            duration: 2000,
            type: "default",
            icon: "none",
        })
        return false
    }
    btnLoading.value = true
    const signUrls = fileList1.value.map(item => item.url[0]?.url).filter(Boolean);
    let imagesList = ''
    if (signUrls) {
        imagesList = signUrls.join(',')
    } else {
        imagesList = ''
    }
    let params = {
        funplay_title: titleTex.value,
        funpaly_content: value1.value,
        images: imagesList,
    }
    funplay(params).then((res: object) => {
        // console.log("🚀res:", res)
        if (res.code == 200) {
            uToastRef.value.show({
                message: t('publishedsuccessfully'),
                duration: 2000,
                type: "default",
                icon: "none",
            })
            titleTex.value = ''
            value1.value = ''
            fileList1.value = []
            // 关闭所有页面，进入首页
            uni.reLaunch({
                url: '/pages/index/index',
            });
        } else if (res.code == 993) {
            modalText1.value = res.msg
            showImage.value = true
            isCancel.value = false
            modalShow.value = true
        } else if (res.code == 13121205) {// 标题/内容违规
            modalText1.value = t('suspectedofagain')
            showImage.value = true
            isCancel.value = false
            modalShow.value = true
        } else {
            uToastRef.value.show({
                message: `${res.msg}`,
                duration: 2000,
                type: "default",
                icon: "none",
            })
        }
    }).catch((err: object) => {
        uToastRef.value.show({
            message: t('publishedsuccessfully'),
            duration: 2000,
            type: "default",
            icon: "none",
        })
    }).finally(() => {
        btnLoading.value = false
    })
}
// 预览
const previewBtn = () => {
    if (upImgLoading.value) {
        uToastRef.value.show({
            message: t('Uploadingpleasewait'),
            duration: 2000,
            type: "default",
            icon: "none",
        })
        return false
    }
    // 如果输入空格内容只有空格，将内容去掉
    if (titleTex.value && titleTex.value.replace(/\s+/g, '') === "") {
        titleTex.value = ''
    } else if (value1.value && value1.value.replace(/\s+/g, '') === "") {
        value1.value = ''
    }
    if (!titleTex.value) {
        uToastRef.value.show({
            message: t('pleaseentertitle'),
            duration: 2000,
            type: "default",
            icon: "none",
        })
        return false
    } else if (!value1.value) {
        uToastRef.value.show({
            message: t('pleaseenterdescription'),
            duration: 2000,
            type: "default",
            icon: "none",
        })
        return false
    }
    if (titleTex.value.length > 30 && titleTex.value.length < 5) {
        uToastRef.value.show({
            message: t('titlecharacters'),
            duration: 2000,
            type: "default",
            icon: "none",
        })
        return false
    }
    if (value1.value.length > 1000 && value1.value.length < 5) {
        uToastRef.value.show({
            message: t('Content1000'),
            duration: 2000,
            type: "default",
            icon: "none",
        })
        return false
    }
    if (fileList1.value.length <= 0) {
        uToastRef.value.show({
            message: t('Pleaseuploadpictures'),
            duration: 2000,
            type: "default",
            icon: "none",
        })
        return false
    }

    const signUrls = fileList1.value.map(item => item.url[0]?.signUrl).filter(Boolean);
    let data = [{
        funplay_code: '11111',
        funplay_title: titleTex.value,
        funplay_content: value1.value,
        uerr_sign: userData.value.avatarUrl,
        likes: 0,
        comments: 0,
        user_name: userData.value.userName,
        user_code: userData.value.userCode,
        // add_time: '2025-07-09 14:04:47',
        is_likes: false,
        is_follow: false,
        funplay_urls: signUrls,
        isPreview: true,
    }]
    // #ifdef H5
    uni.navigateTo({
        url: `/pages/index/scrollChart?forget=${encodeURIComponent(JSON.stringify(data))}&num=0&page=1&name=${1}&isYL=1`
    })
    // #endif

    // #ifndef H5
    plus.storage.setItem('indexData2', JSON.stringify(data)) // 储存信息
    plus.storage.setItem('indexNum2', JSON.stringify(0)) // 储存信息
    plus.storage.setItem('indexValue2', JSON.stringify(1)) // 储存信息
    uni.navigateTo({
        url: `/pages/index/scrollChart?name=${1}&isYL=1`
    })
    // #endif
}
const hendleReturnBtn = () => {// 返回键
    // 关闭所有页面，进入首页
    uni.reLaunch({
        url: '/pages/index/index',
    });
}
// 手机物理返回键
onBackPress(() => {
    uni.reLaunch({
        url: '/pages/index/index',
    });
    return true;
})
onLoad(() => {
    // 检测是否获得了相机和相册权限
    let compat = plus.android.importClass('androidx.core.content.ContextCompat')
    let context = plus.android.runtimeMainActivity()
    let result = compat.checkSelfPermission(context, 'android.permission.READ_EXTERNAL_STORAGE')
    let result2 = compat.checkSelfPermission(context, 'android.permission.CAMERA')
    if (result != 0 || result2 != 0) {
        show3.value = true
    } else {
        show3.value = false
    }
    getUserData()
})
</script>

<style lang='scss' scoped>
.content {
    width: 100%;
    height: 100vh;
    background-color: #fff;
    position: relative;

    .topBox1 {
        width: 100%;
        height: calc(2rem);
        padding-top: 2rem;
        background-color: #fff;
        z-index: 9999;
        display: flex;
        align-items: center;
        position: fixed;
        top: 0;

        .returnBtn {
            margin: 0 20rpx;
        }
    }

    .topBox {
        width: 90%;
        margin: 4rem auto 0;
    }

    .titleText {
        width: 90%;
        margin: 0 auto;

        ::v-deep .u-input {
            border-radius: 15px;
            background-color: #C2C2C2;
        }
    }

    .described {
        width: 90%;
        margin: 10rpx auto 0;

        ::v-deep .u-textarea {
            border-radius: 15px;
            background-color: #C2C2C2;
        }
    }

    .topText {
        display: inline-block;
        font-size: 24rpx;
        margin-bottom: 10rpx;
        font-weight: bold;
    }

    .footle {
        width: 90%;
        position: fixed;
        bottom: 0;
        // 居中
        left: 50%;
        transform: translateX(-50%);
        margin-bottom: 20rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #fff;

        .preview {
            width: 50rpx;
            display: inline-block;

            image {
                width: 50rpx;
                height: 50rpx;
                display: inline-block;
                margin-bottom: -10rpx;
            }

            .previewText {
                width: 100%;
                font-size: 24rpx;
                display: inline-block;
                text-align: center;
                color: #7F7F7F;
            }
        }

        .btn {
            width: 80%;
            display: inline-block;

            .u-button {
                height: 80rpx;
                color: #fff;
                font-weight: 600;
                border-radius: 15px;
                background-color: #de868f;
                border: 1px solid #bbbbbb;
            }
        }
    }

    .popupBox3 {
        width: 100%;

        .head {
            width: calc(100% - 40rpx);
            padding: 30rpx 20rpx;

            .head1 {
                width: 100%;
                font-size: 30rpx;
            }

            .head2 {
                width: 100%;
                font-size: 24rpx;
                color: #9E9E9E;
            }
        }

        .pb3body {
            width: 100%;

            .bodyItem {
                border: 1rpx solid #BBBBBB;
                border-radius: 30rpx;
                margin: 0 20rpx 30rpx;
                display: flex;
                align-items: center;

                .bodyItemleft {
                    width: 10%;
                    display: inline-block;
                    margin-left: 3%;

                    image {
                        width: 60rpx;
                        height: 60rpx;
                    }
                }

                .bodyItemright {
                    width: 87%;
                    display: inline-block;
                    margin: 20rpx 0;

                    .bodyItemright1 {
                        font-size: 30rpx;
                        font-weight: bold;
                    }

                    .bodyItemright2 {
                        font-size: 24rpx;
                        color: #9E9E9E;
                    }
                }
            }

            .bodyBtnList {
                width: 96%;
                margin: 0 auto;
                text-align: center;

                .u-button {
                    color: #fff;
                    font-weight: 600;
                    font-size: 30rpx;
                    border-radius: 10px;
                    background-color: #de868f;
                    border: 1px solid #bbbbbb;
                }

                span {
                    height: 2rem;
                    font-size: 26rpx;
                    line-height: 2rem;
                    display: inline-block;
                    margin: 0.5rem 0;
                    color: #9A9A9A;
                }
            }
        }
    }
}
</style>